<template>
  <div style="background: rgb(245, 246, 247); padding-top:0.1rem">
    <div class="brandWrap">
      <div class="clearfix brandHead">
        <img :src="header.imageUrl" alt class="fl" />
        <div class="fr">
          更多
          <img src="https://api.10street.cn/wap/images/home_2019/gengduo.png" alt />
        </div>
      </div>
      <div class="GoodsImgSwipe swiper-container" >
        <div class="brand_list swiper-wrapper">
          <div
            class="swipercon swiper-slide"
            v-for="item in data"
            :key="item.commonId"
            :shopId="item.commonId"
             @click="$emit('commonId' , item.commonId)"
          >
            <a href="javascript:void(0)" class="itemWrap">
              <img :src="item.imageUrl" alt class="goods-pic" />
              <div
                class="ellipsis name"
                style="width: 80%; margin: 0px auto; height: 0.3rem;"
              >{{item.goodsName}}</div>
              <div class="goods-price">
                <p>
                  <img src="https://api.10street.cn/wap/images/oneBuy/priceIcon.png" alt />￥
                  <em>{{item.vipPrice}}</em>
                </p>
                <h3>￥{{item.goodsPrice}}</h3>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Swiper from 'swiper'
import '../../assets/swiper.min.js'
import { resolve } from 'url';

export default {
  props: ["val"],
  data() {
    return {
      data: "",
      header: "",
    };
  },
  watch: {
    val() {
      this.header = JSON.parse(this.val.itemData)[0];
      this.data = JSON.parse(this.val.itemData)[0].goods;
      //  this.$nextTicked();
      setTimeout(()=>{
        this.swipers()
      })
      
    }
  }, 
  methods:{
    swipers(){
      var swiper = new Swiper('.swiper-container', {
        slidesPerView: 2,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        })
    }
  }
}
</script>

<style lang='stylus' scoped>
@import url('../../assets/swiper.min.css')
.fr 
  float: right !important;


.brandWrap 
  background: #fff;
  margin: 0 0.1rem;
  padding: 0.1rem;
  border-radius: 0.1rem;
  overflow: hidden;

  .brandHead 
    margin-bottom: 0.1rem;

    &>img 
      height: 0.2rem;
      margin: 0.033rem 0;
    

    div 
      font-size: 0.13rem;
      color: #666;

      img 
        width: 0.055rem;
        margin: -0.022rem 0 0 0.044rem;
      

.GoodsImgSwipe 
  height: 2.6rem;
  width: 100%;
  padding: 0.165rem 0;
  position relative


.swipercon 
  width: 1.32rem;
  height: 1.98rem;
  transition: 0.044s;
  margin: auto;

  .itemWrap 
    margin: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: #fff;
    z-index: 1;
    border-radius: 0.075rem;
    box-shadow: 0px 0.03rem 0.088rem 1px rgba(0, 0, 0, 0.09);

    .goods-pic 
      width: 100%;
      height: 1.32rem;
      border-radius: 0.074rem 0.074rem 0 0;
    

    .name 
      color: #000000;
      font-size: 0.123rem;
      padding: 0.132rem 0 0.022rem;
      font-weight: bold;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    

    .goods-price 
      margin: 0 0.1rem;
      line-height: 0.22rem;
      height: 0.22rem;
      overflow: hidden;
      text-align: center;

      h3 
        color: #999;
        font-size: 0.11rem;
        margin-left: 0.033rem;
        display: inline-block;
      

      p 
        font-size: 0.1rem;
        color: #FF4A42;
        display: inline-block;

        img 
          width: 0.1rem;
          margin: -0.022rem 0.044rem 0 0;
          height: 0.1rem;
        

        em 
          font-size: 0.15rem;
          font-weight: 600;
        



.swiper-container
  width: 100%

.swiper-slide
  text-align: center
  font-size: 18px
  background: #fff
  display: -webkit-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex
  -webkit-box-pack: center
  -ms-flex-pack: center
  -webkit-justify-content: center
  justify-content: center
  -webkit-box-align: center
  -ms-flex-align: center
  -webkit-align-items: center
  align-items: center
  transition: 300ms

.swiper-slide-active,.swiper-slide-duplicate-active
  transform: scale(1.2)

</style>